<template>
   <div id='videoPlayer'>
       <slot>
           <div :id="id" :wdith="width" :height="height"></div>
       </slot>
   </div>
</template>

<script>
import "dplayer/dist/DPlayer.min.css";
import DPlayer from "dplayer";

export default {
   name: 'videoPlayer',
   components: {
       
   },
   //传入属性
   props:['id','videUrl','width','height'],
   data() {
       return {
           
       };
   },
   computed: {},
   watch: {},
   methods: {
       
   },
   created() {
       
   },
   mounted() {
     //挂载视频时初始化 视频组件
    var time = 0;
    var speek = 0;
    var volume = 0;
    const dp = new DPlayer({
      container: document.getElementById(this.id),  //获取视频的div的id
      autoplay: false,    //是否自动播放
      theme: "#b7daff",   //主体颜色
      loop: true,           //是否循环播放
      lang: "zh-cn",        //语言
      hotkey: true,         //是否使用热键
      preload: "auto",       //加载后是否自动播放
      video: {              //视频选项
        //视频源 包含不同分辨率源
        quality: [            //高清切换
          {
            name: "普清",         //显示的名称
            url: this.videUrl     //使用的url
          },
          {
            name: "高清",
            url: this.videUrl
          },
          {
            name: "超清",
            url: this.videUrl
          }
        ],
        defaultQuality: 0,      //上面清晰度默认使用几
        pic: "",                //未播放显示的图片
        type: "auto"            //图片类型
      },
      contextmenu: [        //视频右键菜单
        {
          text: "custom1",
          link: "https://github.com/DIYgod/DPlayer"
        },
        {
          text: "custom2",
          click: player => {
            console.log(player);
          }
        }
      ]
      //进度显示标题
      //可块 如果在一个页面上 使用两个播放视频组件同时定义了 highlight就会报错
      // highlight: [
      //     {
      //         time: 20,
      //         text: '这是第 20 秒',
      //     },
      //     {
      //         time: 360,
      //         text: '这是 2 分钟',
      //     },
      // ],
    });
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style scoped>
   
</style>